<template>
  <div>
    <vc-date-picker
      ref="calendars"
      :class="type + '-picker-calss'"
      v-model="dateTime"
      is24hr
      color="gray"
      mode="dateTime"
      :is-required="true"
      :minute-increment="5"
      :model-config="modelConfig"
      :masks="masks"
      :locale="locale"
      @popoverWillHide="pickerInput(dateTime)"
    >
      <div slot-scope="props">
        <el-input
          :value="props.inputValue"
          class="vc-date-picker-ipt"
          @focus="iptFocus(props)"
          @blur="iptBlue(props)"
          @change="props.updateValue($event.target.value)"
        ></el-input>
      </div>
    </vc-date-picker>
  </div>
</template>

<script>
import * as dom from '@src/util/dom';
import { formatDate } from 'pub-bbx-utils'; 

// component
import DatePicker from 'v-calendar/lib/components/date-picker.umd'
import { safeNewDate } from '@src/util/time';
import i18n, { t } from '@src/locales'
const shbLocale = i18n.locale
let el;
export default {
  name: 'vc-date-picker-ipt',
  components:{
    VcDatePicker: DatePicker
  },
  props: {
    valTime: {
      type: [String, Number],
      default: '',
    },
    type: {
      type: String,
      default: '',
    },
    timeType:{
      type: String,
      default: '',
    },
    time:{
      type: [String, Number],
      default: '',
    },
    repreatType:{
      type: String,
      default: '0',
    },
  },
  data() {
    return {
      // 时间选择配置
      modelConfig: {
        type: 'string',
        mask: 'YYYY-MM-DD HH:mm:ss',
      },
      masks: {
        inputDateTime24hr: 'YYYY-MM-DD HH:mm',
      },
      dateTime: this.valTime,
      pickerProps: null,
      locale: shbLocale
    };
  },
  computed: {
    computeTime() {
      let time = '';
      if(this.timeType == 'startTime'){
        time = safeNewDate(this.time).getTime() - safeNewDate(this.dateTime).getTime();
      }else {
        time = safeNewDate(this.dateTime).getTime() - safeNewDate(this.time).getTime();
      }
      return (1000 * 60 * 60 * 24) < time;
    }
  },
  watch: {
    valTime(nv,ov){
      this.dateTime = this.valTime;
    },
  },
  methods:{
    chooseToday() {
      const selectList = document.querySelectorAll(`.${this.type}-picker-calss .vc-select select`);
      const date = safeNewDate(this.dateTime);
      selectList[0].value = date.getHours();
      selectList[1].value = date.getMinutes();
    },
    iptFocus(props){
      this.pickerProps = props;
      props.showPopover();
      this.$nextTick(()=>{
        // 手动设置时分的值
        // v-calendar插件本身是可以自动设置时分的 至少用在其他项目中是可以的 如(sm4-dd、以及新创建的项目) 但不知道什么原因 在pc-fe中不可取
        const selectList = document.querySelectorAll(`.${this.type}-picker-calss .vc-select select`);
        const date = safeNewDate(this.dateTime);
        selectList[0].value = date.getHours();
        selectList[1].value = date.getMinutes();

        this.createPopper();
      })
    },
    iptBlue(props){
      this.closePopper();
      props.hidePopover();
    },
    genTemplate(){
      return `
      <div class="vc-date-today" v-clickoutside="closePopper">
        <div>${t('common.base.makeSure')}</div>
      </div>
    `;
    },
    closePopper(){
      el = null;
    },
    createPopper() {
      if(null == el){
        let container = dom.fromHtml(this.genTemplate());
        container.addEventListener('click', this.agendaHandler)
        el = document.body.appendChild(container);
        const pDome = document.querySelector(`.${this.type}-picker-calss .vc-time-picker`);
        pDome.appendChild(el);
      }
    },
    agendaHandler(e){
      const text = e.target.innerHTML;
      if(text === this.$t('common.base.today')){
        let currentDate = safeNewDate();
        let h = currentDate.getHours();
        if(h < 23){
          currentDate.setHours(h + 1, 0, 0, 0);
        }else{
          let m = currentDate.getMinutes();
          m = Math.ceil(m / 5) * 5;
          currentDate.setMinutes(m);
        }
        
        this.dateTime = formatDate(currentDate);
        this.chooseToday();
        if(this.$refs.calendars) {
          this.$refs.calendars.move(currentDate); // 日历视图移动到当前月份
        }
      }else { // 确定
        this.pickerInput(this.dateTime);
        this.pickerProps.hidePopover();
      }
    },
    pickerInput(value){
      if(this.type == 'endTime'){
        // if(safeNewDate(this.time).getTime() == safeNewDate(value).getTime()){
        //   this.setTime();
        //   return this.$platform.notification({title:"计划开始时间不能和计划完成时间相同",type: 'error'});
        // }
        if(safeNewDate(this.time).getTime() > safeNewDate(value).getTime()) { //计划开始时间不能大于计划完成时间
          this.setTime();
          return this.tips();
        }else if(this.repreatType > 0){
          const computedTime = safeNewDate(this.time).getTime() + (1000 * 60 * 60 * 24)
          if(computedTime < safeNewDate(this.dateTime).getTime()) {
            this.setTime();
            return this.$platform.notification({title:this.$t('calendar.limit.loopAgendaLimit', {num1: 24}) ,type: 'error'});
          }
        }else {
          const endTime = safeNewDate(this.time).getTime() + (1000 * 60 * 60 * 24 * 30)
          if(safeNewDate(this.dateTime).getTime() > endTime){
            this.setTime();
            return this.$platform.notification({title: this.$t('calendar.limit.rangeLimit', {num: 30}),type: 'error'});
          }
        }
      }
      this.$emit('change', value);
    },
    setTime(){
      this.$nextTick(()=>{
        this.dateTime = this.valTime;
      })
    },
    tips(){
      this.$platform.notification({
        title: this.$t('calendar.limit.timeLimit'),
        type: 'error'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .vc-container {
  min-width: 300px!important
}
.vc-date-picker-ipt {
  width: 100%;
  height: 28px;
}

::v-deep .is-disabled {
  pointer-events: auto !important;
  cursor: no-drop !important;
}
.vc-container [role=button], .vc-container button {
  cursor: no-drop !important;
}
::v-deep .vc-select select {
  background-color: #fff !important;
}
::v-deep .vc-day-layer + .vc-day-content,
::v-deep .vc-day-layer + .vc-day-content:focus {
  background-color: $color-primary;
}
::v-deep .vc-date .vc-month,
::v-deep .vc-date .vc-day {
  color: $color-primary !important;
}
::v-deep .vc-select select[data-v-14bdabaf],
::v-deep .vc-select select[data-v-14bdabaf]:focus {
  border: 1px solid $border-color-base;
}
::v-deep .vc-nav-title,
::v-deep .vc-nav-item:focus,
::v-deep .vc-nav-header .vc-nav-arrow:focus,
::v-deep .vc-nav-item.is-active {
  color: #000;
  border: 2px solid #fff;
}
::v-deep .vc-nav-item:hover{
  background-color: rgba(204,214,224,.3);
  color: #000;
  box-shadow: none;
}
::v-deep .vc-nav-item.is-current {
  border-color: $color-primary;
}
::v-deep .vc-nav-popover-container {
  background-color: #fff;
  color: #000;
}
::v-deep .vc-nav-arrow:hover,
::v-deep .vc-nav-title:hover {
  background-color: #edf2f7;
  color: #718096;
}
::v-deep .vc-nav-container .vc-container:focus, .vc-container :focus {
  border: 2px solid #fff;
}

::v-deep .vc-select select {
  max-height: 100px;
  overflow: auto;
}

::v-deep .vc-time-picker {
  position: relative;
}
::v-deep .vc-date-today {
  position: absolute;
  bottom: 8px;
  right: 6px;
  z-index: 99999;
  display: flex;
  align-items: center;
  span {
    font-size: 12px;
    color: $color-primary;
    cursor: pointer;
  }
}
::v-deep .vc-date-today div{
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  text-align: center;
  padding: 0 15px;
  margin-left: 3px;
  cursor: pointer;
  color: #fff;
  background-color: $color-primary;
}
::v-deep .is-today-btn {
  background-color: $text-color-gray;
  cursor: no-drop;
}
</style>